<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生 JavaScript 实现的待办事项</title>
</head>
<body>
<input id="textInput" type="text" placeholder="Task to be done...">
<button id="addBtn">Add</button>
<div id="tasks"></div>

<script>
    let addButton = document.getElementById("addBtn");

    addButton.onclick = function () {
        addTask();
    }

    document.getElementById("textInput").addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
            addTask();
        }
    });

    let tasks = document.getElementById("tasks");
    function addTask() {
        let textInput = document.getElementById("textInput");
        let textInputValue = textInput.value;
        let taskContent = textInputValue.trim();
        if (taskContent.length === 0) {
            alert("请输入内容");
        } else {

            tasks.innerHTML += `
                <div class='task'>
                    <input class="task-checkbox" type="checkbox" />
                     <span class="task-content">${taskContent}</span>
                      <button class="delete"><i>x</i></button>
                </div>
            `;

            textInput.value = '';

            document.querySelectorAll(".task-checkbox").forEach(function (checkboxElement) {
                checkboxElement.onclick = function () {

                    this.nextElementSibling.setAttribute("style", `text-decoration: ${this.checked ? 'line-through' : 'none'};`);
                }
            });

            document.querySelectorAll(".delete").forEach(function (btnElement) {
                btnElement.onclick = function () {

                    this.parentNode.remove();
                }
            });
        }
    }
</script>
</body>
</html>